<template>
  <div>
    <el-card ref="boxcard" class="box-card">
      <el-tabs v-model="tabName" @tab-click="tabClick">
        <el-tab-pane :key="item.name" v-for="item in tableTabs" :label="item.title" :name="item.name" class="tab-pane">
          <span slot="label"><i :class="item.icon" style="margin-right:6px;"></i>{{ item.title }}</span>
          <div v-if="item.name === 'form'">
            <form-builder ref="formBuilder" v-model="formVal" :buildData="formCode" v-if="itemList.length > 0" />
            <div class="btnWrapper">
              <el-button type="primary" size="small" class="button" @click="handlerSubForm">提交</el-button>
            </div>
          </div>
          <div v-if="item.name ==='config'">
            <textarea :ref="item.name" v-model="code" v-show="item.name === 'config' || item.name === 'value'"></textarea>
          </div>
          <div v-if="item.name ==='value'">
            <textarea :ref="item.name" v-model="code" v-show="item.name === 'config' || item.name === 'value'"></textarea>
          </div>
          <div v-if="item.name === 'view'">
            <form-viewer ref="formViewer" v-model="formVal" :buildData="formCode"></form-viewer>
          </div>
          <div v-if="item.name === 'edit'">
            <form-builder ref="formBuilder" v-model="formEditVal" :buildData="formEditCode" />
            <div class="btnWrapper">
              <el-button type="primary" size="small" class="button" @click="editFormData()">回显数据</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import   formBuilder  from '../components/form-builder'
import   formViewer   from '../components/form-viewer'

import  CodeMirror    from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/selection/active-line.js'
import 'codemirror/mode/javascript/javascript'
//import { codemirror } from 'vue-codemirror';

export default {
  components: {
    formBuilder,
    //codemirror,
    formViewer
  },
  data() {
    return {
      codeEditor    : undefined,
      valueEditor   : undefined,
      options : {
        tabSize     : 4, // 缩进格式
        theme       : 'dracula', // 主题，对应主题库 JS 需要提前引入
        lineNumbers : true, // 显示行号
        line        : true,
        styleActiveLine: true, // 高亮选中行
        hintOptions: {
          completeSingle: true // 当匹配只有一项的时候是否自动补全
        }
      },
      formCode: '',
      formVal: '',
      formEditVal: '',
      formEditCode: '',
      tabName: 'form',
      tableTabs: [{
        title : '编辑表单',
        name  : 'form',
        icon  : 'el-icon-date'
      }, {
        title : '配置',
        name  : 'config',
        icon  : 'el-icon-setting'
      }, {
        title : '数据',
        name  : 'value',
        icon  : 'el-icon-coin'
      }]
    }
  },
  mounted() {
    this.$nextTick(() => {
      const formValue = localStorage.getItem("formValue");
      this.formCode   = formValue;
    })
  },
  methods: {
    tabClick(tab){
      this.$nextTick(()=>{
        let  ht     = this.$refs.boxcard.$el.clientHeight-95
        if(tab.name==='config'){
          if(this.$refs['config'] && this.codeEditor===undefined){
            this.codeEditor = CodeMirror.fromTextArea(this.$refs['config'][0],this.options)
          }          
          this.codeEditor.setSize('auto',ht)
          this.codeEditor.getDoc().setValue(this.code)
          this.codeEditor.refresh()
        }else if(tab.name==='value'){
          if(this.$refs['value'] && this.valueEditor===undefined){
            this.valueEditor = CodeMirror.fromTextArea(this.$refs['value'][0],this.options)
          }
          this.valueEditor.setSize('auto',ht)
          this.valueEditor.getDoc().setValue(this.code)
          this.valueEditor.refresh()
        }
      })
    },
    handlerchangeopen() {
      
    },
    editFormData() {
      this.formEditCode = this.formCode;
      this.formEditVal  = this.formVal;
    },
    handlerSubForm() {
      if(this.$refs['formBuilder']){
        this.$refs['formBuilder'][0].validate();
        if (this.formVal !== '') {
          //this.addNewTab();
          this.addEditTab();
        }
      }
    },
    addNewTab() {
      if (this.tableTabs.length < 4) {
        this.tableTabs.push({
          title : '查看表单',
          name  : 'view',
          icon  : 'el-icon-s-tools'
        });
      }

    },
    addEditTab() {
      if (this.tableTabs.length < 5) {
        this.tableTabs.push({
          title : '表单数据回显',
          name  : 'edit',
          icon  : 'el-icon-document-copy'
        });
      }

    }
  },
  computed: {
    itemList() {
      if (this.formCode !== '') {
        const  form = JSON.parse(this.formCode);
        return form.list;
      } else {
        return [];
      }
    },
    code: {
      get() {
        if (this.tabName === 'form') {
          return ''
        } else if (this.tabName === 'config') {
          return this.formCode
        } else {
          return this.formVal
        }
      },
      set() { }
    }
  }
}
</script>

<style scoped>
/* .box-card >>> .el-tabs__header{
  margin: 0px 0px 0px 0px;
} */

.box-card {
  width: 60%;
  height:calc(100%-20px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 10px auto;
  overflow: auto;
  display: block;
}
.el-card__body{
  height:calc(100%-20px);
}
.btnWrapper{
  margin-bottom:15px;
  text-align:right;
  padding-top:20px;
  padding-right:100px;
}
.button{
  width:180px;
}
#app {
  position: relative;
}
</style>